<template>
  <div class="box">
    <el-button type="primary" @click="dialog">添加商品分类</el-button>

    <el-table
      :data="tableData1"
      style="width: 100%"
      row-key="cat_id"
      border
      lazy
      :load="load"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column prop="cat_name" label="分类名称" width="180">
      </el-table-column>
      <el-table-column prop="address" label="是否有效">
        <i class="el-icon-success" style="color: lightgreen"></i>
      </el-table-column>
      <el-table-column prop="" label="排序">
        <template slot-scope="props">
          <el-button
            type="primary"
            v-if="props.row.cat_level == 0"
            plain
            size="mini"
            >一级</el-button
          >
          <el-button
            type="success"
            v-if="props.row.cat_level == 1"
            plain
            size="mini"
            >二级</el-button
          >
          <el-button
            type="warning"
            v-if="props.row.cat_level == 2"
            plain
            size="mini"
            >三级</el-button
          >
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="props">
          <el-button type="primary" @click="bianji(props.row.cat_id)"
            >编辑</el-button
          >
          <el-button type="danger" @click="shanchu(props.row.cat_id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :title="title" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="父类名称" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          v-if="flag"
          label="父级分类"
          :label-width="formLabelWidth"
        >
          <el-cascader
            :options="options"
            clearable
            :props="{ label: 'cat_name', value: 'cat_id' }"
            @change="handleChange"
          ></el-cascader>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialog2(val, form.name)"
          >确 定</el-button
        >
      </div>
    </el-dialog>

    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[2, 5, 10, 50]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>
  
  <script>
import {
  getParameter2,
  addFenlei,
  getParameter,
  deleteFenlei,
  bianjiFenlei,
  fenleiFenye,
} from "@/api/user";
export default {
  name: "ComClass",
  data() {
    return {
      jitiao: "",
      dangq: "",
      total: null,
      currentPage4: 0,
      title: "添加分类",
      attrid: "",
      val: "",
      flag: true,
      tableData1: [],
      options: [],
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      formLabelWidth: "120px",
    };
  },
  methods: {
    handleSizeChange(val) {
      fenleiFenye(1, val).then((res) => {
        this.tableData1 = res.data.data.result;
      });
    },
    handleCurrentChange(val) {
      fenleiFenye(val, 2).then((res) => {
        this.tableData1 = res.data.data.result;
      });
    },

    load(tree, treeNode, resolve) {
      resolve([]);
    },
    handleChange(value) {
      this.$message({
        message: "获取动态参数成功",
        type: "success",
      });
      this.disabled = false;
      this.val = value[1];
      console.log(this.val);
    },
    bianji(id) {
      this.dialogFormVisible = true;
      this.flag = false;
      this.attid = id;
      console.log(id);
      this.title = "更新分类名称";
    },
    dialog() {
      this.dialogFormVisible = true;
      this.flag = true;
      console.log(this.flag);
      this.title = "添加分类";
    },
    dialog2(id, catName) {
      console.log(id, catName);
      this.dialogFormVisible = false;
      if (this.flag) {
        addFenlei(id, catName).then((res) => {
          console.log(res.data);
          this.getShujv();
        });
      } else {
        bianjiFenlei(this.attid, catName).then((res) => {
          console.log(res);
          this.getShujv();
        });
      }
    },
    shanchu(id) {
      deleteFenlei(id).then((res) => {
        console.log(res);
        this.getShujv();
      });
      // deleteParameter(id,attrid).then(res => {
      // })
      // console.log(id,attrid);
    },
    getShujv() {
      getParameter().then((res) => {
        console.log(res.data.data);
        this.tableData1 = res.data.data;
        this.total = res.data.data.length;
      });
    },
  },
  created() {
    getParameter2().then((res) => {
      console.log(res.data.data);
      this.options = res.data.data;
    });
    this.getShujv();
  },
};
</script>
  
<<<<<<< HEAD
  <style>
  </style>














=======
  <style lang="scss" scoped>
.box {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  border: 1px solid #ebeef5;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
}
</style>
>>>>>>> lifeilong
